<head>
    <meta name="viewport" content="initial-scale=0.5,user-scalable=no,width=device-width,viewport-fit=cover">
    <script src="../build/index.js"></script>
</head>

<body>
    <style>
        * { -webkit-tap-highlight-color:rgba(0,0,0,0); }
    </style>
    <canvas id="app" width="400" height="800"></canvas>

    <script>
        var $app = new Easycanvas.Painter();

        $app.register(document.getElementById('app'), {
            fastclick: true,
        });
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: 'root',
                content: {
                    img: img,
                },
                style: {
                    width: 250, height: 130,
                    cutLeft: 0, cutTop: 0, // source position, default 0
                    left: Easycanvas.Transition.ease(111, 422, 2500).loop(),
                    top: 80,
                    opacity: 1,
                    rotate: 20,
                    locate: 'center', // default center
                },
                events: {
                    click: function () {
                        console.log('click !');
                    },
                    touchstart: function () {
                        console.log('touchstart !');
                    },
                    touchend: function () {
                        console.log('touchend !');
                    },
                },
            });
        });
    </script>
</body>

